<template>
  <view class="">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">训练总结</block>
    </cu-custom>

    <view class="quan">
      <view style="position: fixed;left: 0;right: 0;top: 130rpx;z-index: 99;">
        <view class="tou">
          <view class="zuo text-overflow">
            <view class="ns">
              {{user.username}}
            </view>
          </view>
          <view class="zhong">
            <view class="qq">
              <view class="dem">
                {{user.username}}
              </view>
              <view class="cjz">
                创建者
              </view>
            </view>
            <view class="bb">
              <text>{{user.phone}}</text>
              <text style="margin: 0 30rpx;">|</text>
              <text>{{user.sex == 1 ? '男' : user.sex == 2 ? '女' : '男'}}</text>
              <text style="margin: 0 30rpx;">|</text>
              <text>{{user.age || '18'}}岁</text>
            </view>
          </view>
        </view>
        <view class="xqsc">
          <view class="kh u-f-ajc">
            客户心情：<view class="emoji-item">
              <image :src="emoji[beforeClass.selectChage]" />
            </view>
          </view>
          <view class="kh">
            课程时长：<text class="kh2">{{list.times.minute}}:{{list.times.second}}</text>
          </view>
          <view class="kh">
            完成日期：<text class="kh2">{{nowDay}}</text>
          </view>
        </view>
      </view>
      <view class="mask" v-if="isMask"></view>
      <view class="scroll-view-x">
        <!-- 请教练确认 -->
        <view class="item-title relative">请教练确认
          <view class="sjx"></view>
        </view>
        <view class="course-title">课程内容<text>请为动作选择完成情况，未标记的视为未进行</text></view>
        <!-- 111 -->
        <view class="course-list" style="border-left:4px solid #FFB14D;">
          <view class="course-item" v-for="(item, index) in hotTraining" :key='index'>
            <view class="u-f-ac u-f-jsb" @click="courseTtemClick('hotTraining', index)" :class="item.isShow ? 'actice-coourse-item1': ''">
              <view>
                <text>{{item.name}}</text>
                <text class="course-group">{{item.groupList.filter(item => item.active).length}}/{{item.gropNum}}组</text>
              </view>
              <view>
                <text class="emoji-item" v-for="(ite, ind) in emojiList" :key="ind" :class="['cuIcon-'+ite, item.active === ind.toString()? 'acticeClass': '']"
                  @click.stop="selectBigEmoji('hotTraining', index, ind)"></text>
              </view>
            </view>

            <template v-if="item.isShow">
              <view class="item-list specials u-f-ac u-f-jsb" v-for="(item2, index2) in item.groupList" :key="index2">
                <view class="u-f-ac">
                  <view class="item-nums item-nums2">{{item2['次数'] ? item2['次数']+'次' : '-'}}</view>
                  <view class="item-nums item-nums2">{{item2['阻力'] ? item2['阻力']+'KG' : '-'}}</view>
                  <view class="item-nums item-nums2">{{item2['间休'] ? item2['间休']+'S' : '-'}}</view>
                  <view class="item-nums item-nums2">{{item2['器械'] || '-'}}</view>
                </view>
                <view style="text-align: center;">
                  <view class="u-f-ajc">
                    <view v-for="(item3, index3) in emojiList" :key="index3" @click="selectEmoji('hotTraining', index, index2, index3)"
                      class="emoji-item2" :class="['cuIcon-'+item3, item2.active === index3 .toString()? 'acticeClass': '']"></view>
                  </view>
                </view>
              </view>
            </template>

          </view>
          <view v-if="!hotTraining.length" class="noMove u-f-ajc" style="color: #999;">暂无热身训练动作</view>
        </view>

        <!-- 222 -->
        <view class="course-list" style="border-left:4px solid #39BB9E;">
          <view class="course-item" v-for="(item, index) in formalTraining" :key='index'>
            <view class="u-f-ac u-f-jsb" @click="courseTtemClick('formalTraining', index)" :class="item.isShow ? 'actice-coourse-item2': ''">
              <view>
                <text>{{item.name}}</text>
                <text class="course-group">{{item.groupList.filter(item => item.active).length}}/{{item.gropNum}}组</text>
              </view>
              <view>
                <text class="emoji-item" v-for="(ite, ind) in emojiList" :key="ind" :class="['cuIcon-'+ite, item.active === ind.toString()? 'acticeClass': '']"
                  @click.stop="selectBigEmoji('formalTraining', index, ind)"></text>
              </view>
            </view>

            <template v-if="item.isShow">
              <view class="item-list specials u-f-ac u-f-jsb" v-for="(item2, index2) in item.groupList" :key="index2">
                <view class="u-f-ac">
                  <view class="item-nums item-nums2">{{item2['次数'] ? item2['次数']+'次' : '-'}}</view>
                  <view class="item-nums item-nums2">{{item2['阻力'] ? item2['阻力']+'KG' : '-'}}</view>
                  <view class="item-nums item-nums2">{{item2['间休'] ? item2['间休']+'S' : '-'}}</view>
                  <view class="item-nums item-nums2">{{item2['器械'] || '-'}}</view>
                </view>
                <view style="text-align: center;">
                  <view class="u-f-ajc">
                    <view v-for="(item3, index3) in emojiList" :key="index3" @click="selectEmoji('formalTraining', index, index2, index3)"
                      class="emoji-item2" :class="['cuIcon-'+item3, item2.active === index3 .toString()? 'acticeClass': '']"></view>
                  </view>
                </view>
              </view>
            </template>

          </view>
          <view v-if="!formalTraining.length" class="noMove u-f-ajc" style="color: #999;">暂无正式训练动作</view>
        </view>

        <!-- 333 -->
        <view class="course-list" style="border-left:4px solid #799AF7;">
          <view class="course-item" v-for="(item, index) in relaxTraining" :key='index'>
            <view class="u-f-ac u-f-jsb" @click="courseTtemClick('relaxTraining', index)" :class="item.isShow ? 'actice-coourse-item3': ''">
              <view>
                <text>{{item.name}}</text>
                <text class="course-group">{{item.groupList.filter(item => item.active).length}}/{{item.gropNum}}组</text>
              </view>
              <view>
                <text class="emoji-item" v-for="(ite, ind) in emojiList" :key="ind" :class="['cuIcon-'+ite, item.active === ind.toString()? 'acticeClass': '']"
                  @click.stop="selectBigEmoji('relaxTraining', index, ind)"></text>
              </view>
            </view>

            <template v-if="item.isShow">
              <view class="item-list specials u-f-ac u-f-jsb" v-for="(item2, index2) in item.groupList" :key="index2">
                <view class="u-f-ac">
                  <view class="item-nums item-nums2">{{item2['次数'] ? item2['次数']+'次' : '-'}}</view>
                  <view class="item-nums item-nums2">{{item2['阻力'] ? item2['阻力']+'KG' : '-'}}</view>
                  <view class="item-nums item-nums2">{{item2['间休'] ? item2['间休']+'S' : '-'}}</view>
                  <view class="item-nums item-nums2">{{item2['器械'] || '-'}}</view>
                </view>
                <view style="text-align: center;">
                  <view class="u-f-ajc">
                    <view v-for="(item3, index3) in emojiList" :key="index3" @click="selectEmoji('relaxTraining', index, index2, index3)"
                      class="emoji-item2" :class="['cuIcon-'+item3, item2.active === index3 .toString()? 'acticeClass': '']"></view>
                  </view>
                </view>
              </view>
            </template>

          </view>
          <view v-if="!relaxTraining.length" class="noMove u-f-ajc" style="color: #999;">暂无放松整理动作</view>
        </view>

        <!-- 请客户确认 -->
        <view class="item-title relative">请客户确认
          <view class="sjx"></view>
        </view>
        <!-- 客户数据 -->
        <view class="body_list u-f-ajc">
          <view class="body_item u-f-ajc">
            客户体重<input type="number" placeholder="请选择" v-model="beforeClass.weight" />kg
          </view>
          <view class="body_item u-f-ajc">
            睡眠时长<input type="number" placeholder="请选择" v-model="beforeClass.sackTime" />h
          </view>
          <view class="body_item u-f-ajc">
            胃口指数
            <picker class="pickers" @change="bindPickerChange($event, 1)" :value="array[beforeClass.index1].id" :range="array"
              range-key="name">
              <view class="u-f-ajc" style="width: 100%; height: 40rpx;">{{array[beforeClass.index1].name}}</view>
            </picker>
            <text class="cuIcon-right"></text>
          </view>
          <view class="body_item u-f-ajc">
            活力指数
            <picker class="pickers" @change="bindPickerChange($event, 2)" :value="array[beforeClass.index2].id" :range="array"
              range-key="name">
              <view class="u-f-ajc" style="width: 100%; height: 40rpx;">{{array[beforeClass.index2].name}}</view>
            </picker>
            <text class="cuIcon-right"></text>
          </view>
        </view>
        <!-- 滑动选择器 -->
        <view style="padding-bottom: 30rpx;">
          <view class="u-f-ajc">{{showSliders}}</view>
          <view class="u-f-ac u-f-jsb slider-list">
            <view>非常轻松</view>
            <slider v-model="sliders" @changing="sliderChange" @change="sliderChange" min="0" max="9" activeColor="#39BB9E;"
              backgroundColor="#F9F7FA;" block-size="14" block-color="#39BB9E;" />
            <view>非常吃力</view>
          </view>
        </view>

        <textarea class="remark" v-model="remark1" placeholder="说说你的训练感受" />
        <textarea class="remark" v-model="remark2" placeholder="教练请为客户做出总结" />
        </view>
        
        
    </view>

    <view class="dibu u-f-ajc" @click="goPage">
      {{isMask ? '生成训练海报' : '完成'}}
    </view>
 
    <!-- 销客码显示区 -->
    <view class="cu-modal" :class="modalName=='Image'?'show':''" @click.stop="hideModal" style="z-index: 9999 !important;">
      <view class="cu-dialog">
        <view class="bg-img" style="height:400px;">
          <image :src="bg_qrcode" mode="widthFix" style="top: 50%;left: 50%;transform: translate(-50%, -50%);position: absolute;width: 300px;"></image>
          <view class="cu-bar justify-end text-white">
            <view class="action">
              <text class="cuIcon-close "></text>
            </view>
          </view>
        </view>
    
      </view>
    </view>
    <canvas canvas-id="qrcode" style="width: 600px;height: 600px;position: fixed;top: 9999999rpx;left: 1000rpx;" />
  </view>
</template>

<script>
  import timeJS from "../../common/time.js" 
  import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
  export default {
    data() {
      return {
        nowDay: timeJS.gettime.getDate({format: true}),
        user: {},
        beforeClass: {},
        array: [{
          name: '非常好',
          id: 0,
        }, {
          name: '好',
          id: 1,
        }, {
          name: '一般',
          id: 2,
        }, {
          name: '不好',
          id: 3,
        }],
        emojiList: ['close', 'emoji', 'check'],
        emojiList: [
          '../../static/bkhumor-emoji/15.gif',
          '../../static/bkhumor-emoji/21.gif',
          '../../static/bkhumor-emoji/80.gif',
          '../../static/bkhumor-emoji/76.gif',
          '../../static/bkhumor-emoji/20.gif',
        ],
        sliders: 0,
        remark1: '',
        remark2: '',
        list: {},
        hotTraining: [],
        formalTraining: [],
        relaxTraining: [],
        isMask: false,
        
        modalName: null,
        bg_qrcode: '', // 二维码图片
        uQRCode: '', // 二维码信息
        setYuyue: {},
      }
    },
    onLoad(e) {
      console.log('查看时间',timeJS.gettime.getNowFormatDate())
      console.log(e)
      if (e.isMask) {
        this.isMask = true;
        console.log('生成海报')
        this.getData(e.id);
      } else {
        console.log('完成')
        this.user = uni.getStorageSync("phyUser");
        this.beforeClass = uni.getStorageSync("beforeClass"); 
        this.list = uni.getStorageSync("list1");
        this.hotTraining = this.list.list.filter(item => item.colorId == 1)
        this.formalTraining = this.list.list.filter(item => item.colorId == 2)
        this.relaxTraining = this.list.list.filter(item => item.colorId == 3)
        if (this.list.setYuyue) this.setYuyue = this.list.setYuyue
      }
    },
    computed: {
      showSliders() {
        let arr = ['非常轻松', '很轻松', '较轻松', '轻松', '稍轻松', '稍吃力', '吃力', '较吃力', '很吃力', '非常吃力']
        return arr[this.sliders];
      }
    },
    methods: {
      async getData(planCourseId) {
        let {data: {datas}} = await this.$myRuquest({
          url: "/coach/training/getCourseRecordById",
          data: {
           planCourseId
          }
        })
        console.log('前往海报--查看获取的数据', datas)
        
        this.user = uni.getStorageSync("phyUser");
        let beforeClass = {
          selectChage: datas.memberState,
          weight: datas.weight,
          sackTime: datas.sleeping,
          index1: datas.appetite,
          index2: datas.activity,
        }
        this.beforeClass = beforeClass
        
        if (datas.duration < 10) datas.duration = '0' + datas.duration
        let list = {
          times: {
            minute: datas.duration,
            second: '00',
          }
        }
        this.list = list;
        this.sliders = datas.userFeeling
        this.remark1 = datas.remark
        this.remark2 = datas.teachRemark
        this.nowDay = datas.endTime.substring(0, 10)
        
        
        if (datas.classContent.hotTraining.length)  this.hotTraining = datas.classContent.hotTraining
        if (datas.classContent.formalTraining.length)  this.formalTraining = datas.classContent.formalTraining
        if (datas.classContent.relaxTraining.length)  this.relaxTraining = datas.classContent.relaxTraining
        
      },
      courseTtemClick(names, index) {
        this[names][index].isShow = !this[names][index].isShow
      },
      selectBigEmoji(names, index, ind) {
        this[names][index].active = ind.toString();
        this[names][index].groupList.forEach(item => item.active = ind.toString())
        console.log(this[names][index].groupList.filter(item => item.active).length)
      },
      selectEmoji(names, index, index2, index3) {
        this[names][index].groupList[index2].active = index3.toString();
        console.log(this[names][index].groupList.filter(item => item.active))
        if (this[names][index].groupList.filter(item => item.active).length) {
          this[names][index].active = this[names][index].groupList[index2].active
        }
      },
      bindPickerChange: function(e, index) {
        this.beforeClass['index' + index] = e.detail.value
      },
      sliderChange(e) {
        console.log(e.detail.value)
        this.sliders = e.detail.value
      },
      goPage() {
        this.isMask ? this.goMask() : this.submit();
      },
      goMask() {
        console.log('前往海报界面');
        uni.navigateTo({
          url: './TrainingPoster?id'
        })
      },
      
      async getYuyueQrcode() {
        let {
            data
        } = await this.$myRuquest({
          url: '/coach/training/getReserverationState',
          data: {
            rId: uni.getStorageSync('yuyue').rId
            // rId: 4569
          },
        })
        console.log('查看预约数据2', data.datas)
        if (data.result == 200 && Object.keys(data.datas).length) {
          this.setYuyue = data.datas
        } else {
          this.setYuyue = {}
        }
      },
      
      hideModal(e) {
        this.modalName = null
        this.getYuyueQrcode();
      },
      
      async submit() {
        let data = {
              "orderSettingId": this.setYuyue.orderSettingId,
              "activity": this.beforeClass.index2,
              "appetite": this.beforeClass.index1,
              "classContent": {
                "formalTraining": this.formalTraining.filter(item => item.active),
                "hotTraining": this.hotTraining.filter(item => item.active),
                "relaxTraining": this.relaxTraining.filter(item => item.active),
              },
              "coachId": uni.getStorageSync('openid'),
              "courseId": uni.getStorageSync('yuyue').courseId,  // 课程id 后台给我的
              "duration": parseInt(this.list.times.minute),
              "startTime": this.setYuyue.startTime,
              "endTime": timeJS.gettime.getNowFormatDate(), // 结束时间 后台给我的
              "gymId": this.setYuyue.gymId, // 场馆 后台拿的
              "heartBeat": '', // 心率 
              "memberState": this.beforeClass.selectChage,
              "planCourseId": this.beforeClass.planCourseId,
              "remark": this.remark1,
              "teachRemark": this.remark2,
              "reservesionId": uni.getStorageSync('yuyue').rId, // 预约id 从后台拿
              "sleeping": this.beforeClass.sackTime,
              "type": this.setYuyue.type, // 后台拿
              "userCardId": this.setYuyue.userCardId, // 后台拿
              "userFeeling": this.sliders, // 
              "userId": this.user.userId,
              "weight": this.beforeClass.weight,
            }
            
        console.log('查看大对象', data)
        if (!Object.keys(this.setYuyue).length) {
          console.log('请先扫码完成销课')
          uni.showToast({
            title: '请先扫码完成销课~',
            icon: 'none',
          });
          this.showDetail();
          return
        }
        if (!data.teachRemark) {
          return uni.showToast({
            title: '请教练在最下面为客户输入训练总结~',
            icon: 'none',
          });
        }
        uni.showLoading({
          title: '提交中~请稍等'
        })
        let res = await this.$myRuquest({
          url: "/coach/training/addUserCourseRecord",
          method: "POST",
          data,
          header:{
          	'Content-Type':'application/json',
          }
        })
        console.log(res)
        uni.hideLoading()
        uni.redirectTo({
          url: "./curriculum?id="+this.beforeClass.planId
        })
      },
      
      
      showDetail() {
        let item = uni.getStorageSync('yuyue');
        this.uQRCode = 'https://jxjssservice.jxfit.cn?courseId=' + item.courseId + '&rId=' + item.rId + '&coachId=' +
          uni.getStorageSync('openid')
        this.modalName = 'Image'
        this.make()
      },
      async make() {
        var that = this
        // 回调方式
        uQRCode.make({
          canvasId: 'qrcode',
          componentInstance: this,
          text: that.uQRCode,
          size: 200,
          margin: 10,
          backgroundColor: '#ffffff',
          foregroundColor: '#000000',
          fileType: 'jpg',
          correctLevel: uQRCode.errorCorrectLevel.H,
          success: res => {}
        })
      
        // Promise
        uQRCode.make({
          canvasId: 'qrcode',
          componentInstance: this,
          text: that.uQRCode,
          size: 400,
          margin: 10,
          backgroundColor: '#ffffff',
          foregroundColor: '#000000',
          fileType: 'jpg',
          correctLevel: uQRCode.errorCorrectLevel.H
        }).then(res => {})
      
        // 同步等待
        var res = await uQRCode.make({
          canvasId: 'qrcode',
          componentInstance: this,
          text: that.uQRCode,
          size: 400,
          margin: 10,
          backgroundColor: '#ffffff',
          foregroundColor: '#000000',
          fileType: 'jpg',
          correctLevel: uQRCode.errorCorrectLevel.H
        })
        console.log('打印二维码信息', res)
        this.bg_qrcode = res
      },
    }
  }
</script>

<style lang="scss" scoped>
  .quan {
    background: #ffffff;
  }

  .tou {
    width: 100%;
    height: 200upx;
    display: flex;
    align-items: center;
    background: #4d5061;
  }

  .zuo {
    width: 120upx;
    height: 120upx;
    border: #5ab6a1 1upx solid;
    border-radius: 60upx;
    background: #5ab6a1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30upx;
  }

  .ns {
    font-size: 30upx;
    color: #ffffff;
  }

  .qq {
    display: flex;
    align-items: baseline;
    margin: 15upx 30upx;
  }

  .dem {
    color: #ffffff;
    font-size: 36upx;
    word-break: break-all;
    word-wrap: break-word;
  }

  .cjz {
    border-radius: 8upx;
    background: #70727f;
    padding: 4upx 20upx;
    font-size: 30upx;
    color: #ffffff;
    margin-left: 20upx;
  }

  .bb {
    font-size: 28upx;
    margin: 15upx 30upx;
    color: #c4c4c4;
  }

  .xqsc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20upx;
    background-color: #fff;
  }

  .kh {
    font-size: 24upx;
  }

  .kh2 {
    font-size: 36upx;
    font-weight: 555;
  }

  .dibu {
    height: 100upx;
    background: $uni-color-zhuti;
    font-size: 30upx;
    color: #ffffff;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;
  }


  .emoji-item {
    width: 60rpx;
    height: 60rpx;
    margin: 0 10rpx;

    >image {
      width: 100%;
      height: 100%;
    }
  }

  .scroll-view-x {
    width: 100%;
    margin: 280rpx 0 100rpx;
    padding-bottom: 20rpx;

    .item-title {
      width: 100%;
      color: #FFFFFF;
      padding: 30rpx 20rpx;
      border-top: 30rpx solid #F0EEF1;
      background-color: $uni-color-zhuti;

      .sjx {
        position: absolute;
        left: 50rpx;
        bottom: -56rpx;
        width: 0;
        height: 0;
        border: 30rpx solid;
        border-color: $uni-color-zhuti transparent transparent;
      }
    }

    .course-title {
      padding: 60rpx 20rpx 40rpx;
      font-size: 30rpx;
      color: #000;
      font-weight: 600;

      text {
        margin-left: 20rpx;
        font-size: 24rpx;
        color: #aaa;
        font-weight: 500;
      }
    }

    .course-list {
      width: 94%;
      margin: 0 auto;
      background-color: #FFFFFF;
    }
  }
  .noMove {
      margin-bottom: 10rpx;
      background-color: #F7F5F8;
      padding: 30rpx;
  }
  .course-item {
    margin-bottom: 10rpx;
    background-color: #F7F5F8;
    >view:first-of-type {
      padding: 30rpx;
    }
    .course-group {
      margin-left: 20rpx;
      font-size: 24rpx;
      color: #333;
    }

    .emoji-item {
      margin-right: 20rpx;
      font-size: 40rpx;
    }
  }

  .body_list {
    width: 90%;
    margin: 20rpx auto 0;
    box-sizing: border-box;
    padding: 40rpx 2%;
    flex-wrap: wrap;

    .body_item {
      padding: 20rpx 0;
      width: 50%;
      font-size: 24rpx;
    }

    .body_item::before {
      content: '';
      display: inline-block;
      width: 10rpx;
      height: 30rpx;
      background-color: $uni-color-zhuti;
      margin-right: 20rpx;
    }

    input {
      width: 45%;
      text-align: center;
    }
  }

  .pickers {
    width: 45%;
  }
  
  .slider-list {
    font-size: 22rpx;
    padding: 0 30rpx;
    slider {
      width: 60vw;
      margin-left: 0;
      margin-right: 0;
    }
  }
  
  .remark {
    background-color: #F7F5F8;
    width: 90%;
    padding: 30rpx;
    margin: 0 auto 30rpx;
  }
  textarea {
  	caret-color: $uni-color-zhuti;
  }
  
  
  
  .item-list {
    padding: 20rpx 30rpx;
    font-size: 24rpx;
    color: #999;
  
    .item-nums {
      padding: 0 30rpx;
    }
  }
  .specials {
    background-color: #FBF8FB;
  
    .item-nums2 {
      border-right: 1px solid #ddd;
    }
    .item-nums2:last-of-type {
      border-right: none;
    }
  }
  .emoji-item2 {
    width: 40rpx;
    height: 40rpx;
    margin: 0 10rpx;
    font-size: 32rpx;
  
    >image {
      width: 100%;
      height: 100%;
    }
  }
  
  .acticeClass {
    color: #FFC765;
  }
  .actice-coourse-item1 {
    background-color: #FFF2EC !important;
  }
  .actice-coourse-item2 {
    background-color: #DCF2F6 !important;
  }
  .actice-coourse-item3 {
    background-color: #E5E9FF !important;
  }
  .mask {
    width: 100%;
    height: 100vh;
    left: 0;
    right: 0;
    bottom: 100rpx;
    position: fixed;
    background-color: rgba(0,0,0,0);
    z-index: 9;
  }
</style>
